<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/bootstrap-select.min.css" />
    <link rel="stylesheet" href="../css/toastr.min.css" />
    <link rel="stylesheet" href="../css/main.css" />
    <link rel="stylesheet" href="../css/validationEngine.jquery.css" />
    <script src="../js/jquery.min.js"></script>
    <script src="../js/json.min.js"></script>
    <script src="../js/jquery.i18n.properties-min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/bootstrap-select.min.js"></script>
    <script src="../js/bootstrap-datetimepicker.min.js"></script>
    <script src="../js/toastr.min.js"></script>
	<script src="../js/core.js"></script>
    <script src="../js/core-datagrid.js"></script>
    <script src="../js/core-selectInput.js"></script>
    <script src="../js/core-etable.js"></script>
    <script src="../js/jquery.validationEngine.min.js"></script>
    <script src="../js/jquery.validationEngine-zh_CN.js"></script>
  </head>
<body>
<form id="etableForm">
    <div align="center" id="etable"></div>
    <button type="submit" class="btn btn-primary">保存</button>
</form>
</body>
<script type="text/javascript">
$(document).ready(function() {
		var citys = [{value:"SHA",label:"上海",short:"ShangHai"},{value:"HYN",label:"黄岩"},{value:"HGH",label:"杭州",short:"Hangzhou"},{value:"HGH2",label:"杭州",short:"Hangzhou"},{value:"HGH3",label:"杭州",short:"Hangzhou"}];
		var selectInputOptions = {
		    data:citys,//数据源
		    placeholder:"请输入",//默认显示文字
		    dataContainer:"dataContainer",//会将选择项的value值写到dataContainer控件，这里dataContainer是控件的ID
		    onSelect:function(item,input){
		        //选择某项后回调函数，item为选择的json对象，当数据源有多个对象需要处理时使用
		        input.parent().parent().find("[key=demofloat]").html(item.value);
		        console.log(item);
		    }
		};
		
        var demoHead = [{"key":"DemoString","name":"DemoString","width":100 ,"component":"text","validation":"validate[required,maxSize[20]]"},
                    {"key":"DemoFloat","name":"DemoFloat","width":100},
                    {"key":"DemoInt","name":"DemoInt","width":100,"component":"selectInput","para":selectInputOptions,"validation":"validate[required]"},
                    {"key":"DemoLong","name":"DemoLong","width":100,"component":"text","validation":"validate[required,max[9999999]]"}];
		//http://code.ciaoca.com/jquery/validation_engine/
       function showDemoList(){
    	   callSvr("demo/returnList",{},function(result) {
				var options = {head:demoHead,data:result,view:"edit"};
    			$("#etable").etable(options);
    			$("#etableForm").validationEngine("detach");//移除之前绑定的表单验证
    			 /*
    			 $("#etableForm").validationEngine({//因为表单元素是动态生成的，所以每次查询完数据后都需要重新绑定一次
    		            promptPosition: "centerRight",//提示信息的位置，默认就是	topRight ("topRight", "topLeft", "bottomRight" "bottomLeft", "centerRight", "centerLeft", "inline")
    		            binded : true,  //是否绑定实时验
    		            showOneMessage: false,
    		            addPromptClass:"formError-small",
    		            onValidationComplete: function(form, status){
    		                if (status) {
    		                	console.log($("#etable").getEtableValue());
    		                	callSvr("demo/modifyDemoList",{list:$("#etable").getEtableValue()},function(result) {
    		                		toastr.success('调用成功', '');
    		                		showDemoList();
    		             		});
    		                }
    		            }
    		    });*/
    		});
       }
       showDemoList();
      
});

</script>
</html>